<template>
	<view class="container">
		<view class="header">
			<view class="header-item">
				<text class="label">水厂名称：</text>
				<picker :value="selectedPlantIndex" :range="waterPlants" @change="onPlantChange">
					<view class="picker">
						{{ waterPlants[selectedPlantIndex] || '请选择' }}
						<text class="arrow">▼</text>
					</view>
				</picker>
			</view>
			<view class="header-item">
				<text class="label">巡检日期：</text>
				<text class="date">{{ inspectionDate }}</text>
			</view>
		</view>

		<view class="add-button-container">
			<button class="add-button" @click="addRectification">+ 添加整改单</button>
		</view>

		<view class="issue-list">
			<view v-for="order in orders" :key="order._id" class="issue-card" @click="goToDetail(order._id)">
				<view class="card-header">
					<view class="issue-type">
						整改单
					</view>
					<view class="status" :class="getOrderStatusClass(order.status)">
						{{ order.status }}
					</view>
				</view>
				<view class="card-content">
					<text class="issue-title">水厂：{{ order.waterPlantName }}</text>
					<text class="deadline">创建日期：{{ order.createDate }}</text>
					<text class="deadline">问题类型：{{ order.type }}</text>
				</view>
				<view class="card-footer">
					<text class="record-time">ID：{{ order.id }}</text>
					<text v-if="order.completionTime" class="record-time">完成时间：{{ order.completionTime }}</text>
				</view>
			</view>
		</view>

		<view v-if="!orders || orders.length === 0" class="empty-state">
			<text class="empty-text">暂无整改单记录</text>
			<text class="empty-hint">点击上方"添加整改单"按钮开始记录</text>
		</view>
	</view>
</template>

<script>
	const sitesApi = uniCloud.importObject('sites');
	const zhengaidanApi = uniCloud.importObject('zhengaidan');

	export default {
		data() {
			return {
				selectedPlantIndex: 0,
				sites: [],
				waterPlants: [],
				inspectionDate: '',
				orders: []
			}
		},
		onShow() {
			this.initData();
		},
		methods: {
			async initData() {
				const now = new Date();
				this.inspectionDate = now.getFullYear() + '-' +
					String(now.getMonth() + 1).padStart(2, '0') + '-' +
					String(now.getDate()).padStart(2, '0');
				
				uni.showLoading({
					title: '加载中...'
				});

				try {
					const sitesRes = await sitesApi.getList();
					this.sites = sitesRes.data || [];
					this.waterPlants = this.sites.map(item => item.name);
					
					this.loadOrders();

				} catch (e) {
					uni.showToast({
						title: '站点加载失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			async loadOrders() {
				try {
					const site = this.sites[this.selectedPlantIndex];
					const filter = site ? { plantId: site._id } : {};
					const ordersRes = await zhengaidanApi.getList({ filter });
					this.orders = ordersRes.data || [];
				} catch (e) {
					uni.showToast({
						title: '整改单加载失败',
						icon: 'none'
					});
				}
			},
			onPlantChange(e) {
				this.selectedPlantIndex = e.detail.value;
				this.loadOrders();
			},
			addRectification() {
				uni.navigateTo({
					url: '/pages/inspection/addOrder'
				});
			},
			goToDetail(orderId) {
				uni.navigateTo({
					url: `/pages/inspection/detail?id=${orderId}`
				});
			},
			getOrderStatusClass(status) {
				return {
					'status-pending': status === '待整改',
					'status-completed': status === '已整改'
				};
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.header-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.header-item:last-child {
		margin-bottom: 0;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		margin-right: 20rpx;
		min-width: 140rpx;
	}

	.picker {
		display: flex;
		align-items: center;
		color: #333;
		font-size: 28rpx;
	}

	.arrow {
		margin-left: 10rpx;
		color: #999;
		font-size: 24rpx;
	}

	.date {
		color: #333;
		font-size: 28rpx;
	}

	.add-button-container {
		margin-bottom: 30rpx;
	}

	.add-button {
		background: #007AFF;
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		width: 280rpx;
	}

	.issue-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.issue-card {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.issue-type {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: white;
		background: #007aff;
	}

	.card-content {
		margin-bottom: 20rpx;
	}

	.issue-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.deadline {
		display: block;
		font-size: 26rpx;
		color: #666;
		margin-top: 5rpx;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.record-time {
		font-size: 24rpx;
		color: #999;
	}

	.status {
		padding: 6rpx 12rpx;
		border-radius: 16rpx;
		font-size: 22rpx;
	}

	.status-pending {
		background: #FFF3E0;
		color: #FF9800;
	}

	.status-completed {
		background: #E8F5E8;
		color: #4CAF50;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.empty-hint {
		font-size: 26rpx;
		color: #ccc;
	}
</style>
